<template>
  <div>
    <h2>数据驱动视图</h2>
    <p>{{ str }}</p>
    <button @click="aa">翻转世界</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: "你好世界",
    };
  },
  methods: {
    aa() {
      this.str = this.str.split("").reverse().join("");
      console.log(this.str);
    },
  },
};
</script>

<style>
.box {
  width: 200px;
  height: 1px;
  background-color: green;
}
</style>